<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getMedicalOrderLogistics } from '@/api/medicine'
  import type { ExpressData } from '@/types/order'
  import { onMounted, ref } from 'vue'
  // #ifdef H5|APP
  import AMapLoader from '@amap/amap-jsapi-loader'
  // #endif
  import carImg from '@/static/images/car.png'
  import startImg from '@/static/images/start.png'
  import endImg from '@/static/images/end.png'

  const props = defineProps({
    id: String,
  })
  const dataDetail = ref<ExpressData>()
  const getData = async () => {
    if (props.id) {
      const res = await getMedicalOrderLogistics(props.id)
      dataDetail.value = res
    }
  }
  const initMap = () => {
    let map: any = null

    onMounted(async () => {
      await getData()
      // 配置密钥，需补充类型声明文件
      window._AMapSecurityConfig = {
        securityJsCode: '90229bbf5027f4b6f8385809b56be0c2',
      }

      // 配置 key
      const AMap = await AMapLoader.load({
        key: 'f089b1ffe4c64903f3f9863ec589b865',
        version: '2.0',
        plugins: [],
      })

      // 使用 Amap 初始化地图
      // !!!!! 注意：容器名称为 map，与页面 <view id="map"> 的 id 一致
      map = new AMap.Map('map', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      })

      // 加载驾驶导航插件
      AMap.plugin('AMap.Driving', () => {
        // 创建驾车导航实例(用于物流展示)
        const driving = new AMap.Driving({
          map: map, // 指定轨迹显示地图实例
          showTraffic: false, // 关闭交通状态
          hideMarkers: true,
        })

        // 起始点和终点
        const start = dataDetail.value?.logisticsInfo.shift()
        const end = dataDetail.value?.logisticsInfo.pop()
        const waypoint = dataDetail.value?.logisticsInfo.map((item) => [
          item.longitude,
          item.latitude,
        ])
        // 搜索路径(起始点, 终点, 回调函数)
        driving.search(
          [start?.longitude, start?.latitude],
          [end?.longitude, end?.latitude],
          { waypoints: waypoint },
          (status: string, result: object) => {
            console.log(status, result)
          }
        )
        // 自定义开始结束位置图片
        const startMarker = new AMap.Marker({
          icon: startImg, // 设置自定义图片
          position: [start?.longitude, start?.latitude], // 图片显示的坐标位置
          anchor: 'bottom-center', // 图片位置
        })
        map.add(startMarker)
        const endMarker = new AMap.Marker({
          icon: endImg,
          position: [end?.longitude, end?.latitude],
          anchor: 'bottom-center', // 图片位置
        })
        map.add(endMarker)
        const carImage = new AMap.Marker({
          icon: carImg,
          position: [
            dataDetail.value?.currentLocationInfo.longitude,
            dataDetail.value?.currentLocationInfo.latitude,
          ],
          anchor: 'center',
        })
        map.add(carImage)
        setTimeout(() => {
          map.setFitView([carImage])
          map.setZoom(10)
        }, 2000)
      })
    })
  }
  // #ifdef H5|APP
  initMap()
  // #endif
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ dataDetail?.statusValue }}</cover-view>
      <cover-view class="extra">
        预计{{ dataDetail?.estimatedTime }}送达 {{ dataDetail?.name }} {{ dataDetail?.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <view v-for="item in dataDetail?.list" :key="item.id" class="line">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
